<template>
    <view class="container">
        <!-- 文章内容区域 -->
        <view class="article-content">
            <!-- 文章标题 -->
            <view class="title-section">
                <view class="title">{{articleDetail.title}}</view>
                <view class="meta">
                    <view class="category">
                        <u-icon name="tags" size="28" color="#666"></u-icon>
                        <text>{{articleDetail.category}}</text>
                    </view>
                    <view class="views">
                        <u-icon name="eye" size="28" color="#666"></u-icon>
                        <text>{{articleDetail.views}}阅读</text>
                    </view>
                    <view class="date">
                        <u-icon name="clock" size="28" color="#666"></u-icon>
                        <text>{{articleDetail.date}}</text>
                    </view>
                </view>
            </view>

            <!-- 封面图片 -->
            <view class="cover-section" v-if="articleDetail.cover">
                <image 
                    :src="articleDetail.cover" 
                    mode="widthFix" 
                    class="cover-image"
                ></image>
            </view>

            <!-- 文章正文 -->
            <view class="content-section">
                <rich-text :nodes="articleDetail.content"></rich-text>
            </view>

            <!-- 相关图片 -->
            <view class="images-section" v-if="articleDetail.images && articleDetail.images.length > 0">
                <view class="image-list">
                    <image 
                        v-for="(image, index) in articleDetail.images" 
                        :key="index"
                        :src="image"
                        mode="widthFix"
                        @click="previewImage(index)"
                        class="content-image"
                    ></image>
                </view>
            </view>

            <!-- 文章标签 -->
            <view class="tags-section" v-if="articleDetail.tags && articleDetail.tags.length > 0">
                <view class="tag-list">
                    <view 
                        class="tag-item"
                        v-for="(tag, index) in articleDetail.tags"
                        :key="index"
                    >
                        {{tag}}
                    </view>
                </view>
            </view>

            <!-- 相关推荐 -->
            <view class="related-section" v-if="articleDetail.relatedArticles && articleDetail.relatedArticles.length > 0">
                <view class="section-title">相关阅读</view>
                <view class="related-list">
                    <view 
                        class="related-item"
                        v-for="(article, index) in articleDetail.relatedArticles"
                        :key="index"
                        @click="goToArticle(article.id)"
                    >
                        <image :src="article.cover" mode="aspectFill" class="related-image"></image>
                        <view class="related-info">
                            <view class="related-title">{{article.title}}</view>
                            <view class="related-meta">
                                <text>{{article.views}}阅读</text>
                                <text>{{article.date}}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 底部操作栏 -->
        <view class="action-bar">
            <view class="action-item" @click="toggleLike">
                <u-icon :name="isLiked ? 'heart-fill' : 'heart'" size="40" :color="isLiked ? '#FF4D4F' : '#666'"></u-icon>
                <text :class="{ active: isLiked }">{{articleDetail.likes || 0}}</text>
            </view>
            <view class="action-item" @click="toggleCollect">
                <u-icon :name="isCollected ? 'star-fill' : 'star'" size="40" :color="isCollected ? '#FAAD14' : '#666'"></u-icon>
                <text :class="{ active: isCollected }">收藏</text>
            </view>
            <view class="action-item" @click="shareArticle">
                <u-icon name="share" size="40" color="#666"></u-icon>
                <text>分享</text>
            </view>
            <button class="consult-btn" @click="startConsultation">咨询医生</button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            articleId: null,
            isLiked: false,
            isCollected: false,
            articleDetail: {
                id: 1,
                title: '高血压患者的饮食指南',
                category: '健康饮食',
                views: 1245,
                date: '2024-03-20',
                cover: '/static/images/article-cover.jpg',
                content: `<div style="line-height: 1.8;">
                    <p>高血压是一种常见的慢性疾病，合理的饮食对控制血压至关重要。本文将为您详细介绍高血压患者的饮食注意事项：</p>
                    <h3>1. 控制钠盐摄入</h3>
                    <p>每日食盐摄入量应控制在6克以内，烹饪时可以采用以下方法：</p>
                    <ul>
                        <li>选择新鲜食材，减少加工食品</li>
                        <li>使用香料替代部分盐分</li>
                        <li>培养清淡饮食习惯</li>
                    </ul>
                    <h3>2. 增加钾的摄入</h3>
                    <p>适量补充钾离子有助于降低血压，可以多吃：</p>
                    <ul>
                        <li>香蕉、橙子等水果</li>
                        <li>西红柿、菠菜等蔬菜</li>
                        <li>全谷物</li>
                    </ul>
                </div>`,
                images: [
                    '/static/images/article-1.jpg',
                    '/static/images/article-2.jpg'
                ],
                tags: ['高血压', '饮食指导', '健康生活'],
                likes: 328,
                relatedArticles: [
                    {
                        id: 2,
                        title: '科学运动，远离高血压',
                        cover: '/static/images/article-3.jpg',
                        views: 986,
                        date: '2024-03-19'
                    },
                    {
                        id: 3,
                        title: '高血压用药指南',
                        cover: '/static/images/article-4.jpg',
                        views: 756,
                        date: '2024-03-18'
                    }
                ]
            }
        }
    },
    onLoad(options) {
        if (options.id) {
            this.articleId = options.id;
            // TODO: 根据ID获取文章详情
            this.getArticleDetail();
        }
    },
    methods: {
        getArticleDetail() {
            // TODO: 调用接口获取文章详情
        },
        previewImage(index) {
            uni.previewImage({
                urls: this.articleDetail.images,
                current: index
            });
        },
        toggleLike() {
            this.isLiked = !this.isLiked;
            // TODO: 调用点赞接口
            if (this.isLiked) {
                this.articleDetail.likes++;
            } else {
                this.articleDetail.likes--;
            }
        },
        toggleCollect() {
            this.isCollected = !this.isCollected;
            // TODO: 调用收藏接口
            uni.showToast({
                title: this.isCollected ? '收藏成功' : '已取消收藏',
                icon: 'success'
            });
        },
        shareArticle() {
            // TODO: 实现分享功能
            uni.showShareMenu({
                withShareTicket: true,
                menus: ['shareAppMessage', 'shareTimeline']
            });
        },
        startConsultation() {
            uni.switchTab({
                url: '/pages/consultation/index'
            });
        },
        goToArticle(id) {
            uni.navigateTo({
                url: `/pages/health/article-detail?id=${id}`
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    min-height: 100vh;
    background: #fff;
    padding-bottom: 120rpx;
}

.article-content {
    padding: 30rpx;
    
    .title-section {
        margin-bottom: 30rpx;
        
        .title {
            font-size: 40rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 20rpx;
            line-height: 1.4;
        }
        
        .meta {
            display: flex;
            align-items: center;
            gap: 30rpx;
            
            .category, .views, .date {
                display: flex;
                align-items: center;
                font-size: 24rpx;
                color: #666;
                
                text {
                    margin-left: 8rpx;
                }
            }
        }
    }
    
    .cover-section {
        margin-bottom: 30rpx;
        
        .cover-image {
            width: 100%;
            border-radius: 12rpx;
        }
    }
    
    .content-section {
        font-size: 28rpx;
        color: #333;
        line-height: 1.8;
        margin-bottom: 30rpx;
        
        :deep(h3) {
            font-size: 32rpx;
            font-weight: bold;
            margin: 30rpx 0 20rpx;
        }
        
        :deep(p) {
            margin-bottom: 20rpx;
        }
        
        :deep(ul) {
            padding-left: 30rpx;
            margin-bottom: 20rpx;
        }
    }
    
    .images-section {
        margin-bottom: 30rpx;
        
        .image-list {
            .content-image {
                width: 100%;
                border-radius: 12rpx;
                margin-bottom: 20rpx;
                
                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }
    
    .tags-section {
        margin-bottom: 30rpx;
        
        .tag-list {
            display: flex;
            flex-wrap: wrap;
            gap: 20rpx;
            
            .tag-item {
                padding: 10rpx 20rpx;
                background: #F5F5F5;
                border-radius: 30rpx;
                font-size: 24rpx;
                color: #666;
            }
        }
    }
    
    .related-section {
        .section-title {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 20rpx;
        }
        
        .related-list {
            .related-item {
                display: flex;
                margin-bottom: 30rpx;
                
                &:last-child {
                    margin-bottom: 0;
                }
                
                .related-image {
                    width: 200rpx;
                    height: 140rpx;
                    border-radius: 12rpx;
                    margin-right: 20rpx;
                }
                
                .related-info {
                    flex: 1;
                    
                    .related-title {
                        font-size: 28rpx;
                        color: #333;
                        margin-bottom: 10rpx;
                        line-height: 1.4;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                    }
                    
                    .related-meta {
                        display: flex;
                        gap: 20rpx;
                        
                        text {
                            font-size: 24rpx;
                            color: #999;
                        }
                    }
                }
            }
        }
    }
}

.action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 20rpx 30rpx;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    
    .action-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 40rpx;
        
        text {
            font-size: 24rpx;
            color: #666;
            margin-top: 4rpx;
            
            &.active {
                color: #FF4D4F;
            }
        }
    }
    
    .consult-btn {
        flex: 1;
        height: 80rpx;
        line-height: 80rpx;
        background: #1890FF;
        color: #fff;
        font-size: 28rpx;
        border-radius: 40rpx;
        margin: 0;
    }
}
</style> 